<template>
  <view class="settings-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="nav-title">设置</text>
      <view class="nav-actions">
        <text class="nav-icon" @click="saveSettings">✓</text>
      </view>
    </view>

    <scroll-view class="content-scroll" scroll-y="true">
      <!-- 用户信息 -->
      <view class="user-section">
        <view class="user-avatar" @click="changeAvatar">
          <image class="avatar-img" :src="userInfo.avatar" mode="aspectFill"></image>
          <view class="avatar-edit">
            <text class="edit-icon">📷</text>
          </view>
        </view>
        <view class="user-info">
          <text class="user-name">{{ userInfo.name }}</text>
          <text class="user-level">Lv.{{ userInfo.level }} 动漫爱好者</text>
        </view>
      </view>

      <!-- 账号设置 -->
      <view class="settings-section">
        <text class="section-title">账号设置</text>
        <view class="settings-list">
          <view class="setting-item" @click="editProfile">
            <view class="setting-left">
              <text class="setting-icon">👤</text>
              <text class="setting-name">个人信息</text>
            </view>
            <text class="setting-arrow">›</text>
          </view>
          
          <view class="setting-item" @click="changePassword">
            <view class="setting-left">
              <text class="setting-icon">🔒</text>
              <text class="setting-name">密码修改</text>
            </view>
            <text class="setting-arrow">›</text>
          </view>
          
          <view class="setting-item" @click="manageDevices">
            <view class="setting-left">
              <text class="setting-icon">📱</text>
              <text class="setting-name">设备管理</text>
            </view>
            <text class="setting-arrow">›</text>
          </view>
        </view>
      </view>

      <!-- 偏好设置 -->
      <view class="settings-section">
        <text class="section-title">偏好设置</text>
        <view class="settings-list">
          <view class="setting-item">
            <view class="setting-left">
              <text class="setting-icon">🌙</text>
              <text class="setting-name">深色模式</text>
            </view>
            <switch 
              :checked="preferences.darkMode" 
              @change="toggleDarkMode"
              color="#FF69B4"
            />
          </view>
          
          <view class="setting-item">
            <view class="setting-left">
              <text class="setting-icon">🔔</text>
              <text class="setting-name">消息通知</text>
            </view>
            <switch 
              :checked="preferences.notifications" 
              @change="toggleNotifications"
              color="#FF69B4"
            />
          </view>
          
          <view class="setting-item" @click="changeLanguage">
            <view class="setting-left">
              <text class="setting-icon">🌐</text>
              <text class="setting-name">语言设置</text>
            </view>
            <view class="setting-right">
              <text class="setting-value">{{ preferences.language }}</text>
              <text class="setting-arrow">›</text>
            </view>
          </view>
          
          <view class="setting-item" @click="changeTheme">
            <view class="setting-left">
              <text class="setting-icon">🎨</text>
              <text class="setting-name">主题颜色</text>
            </view>
            <view class="setting-right">
              <view class="theme-preview" :style="{ background: preferences.themeColor }"></view>
              <text class="setting-arrow">›</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 内容管理 -->
      <view class="settings-section">
        <text class="section-title">内容管理</text>
        <view class="settings-list">
          <view class="setting-item" @click="viewMyIPs">
            <view class="setting-left">
              <text class="setting-icon">🎭</text>
              <text class="setting-name">我的IP作品</text>
            </view>
            <view class="setting-right">
              <text class="setting-badge">{{ contentStats.myIPs }}</text>
              <text class="setting-arrow">›</text>
            </view>
          </view>
          
          <view class="setting-item" @click="viewFavorites">
            <view class="setting-left">
              <text class="setting-icon">❤️</text>
              <text class="setting-name">我的收藏</text>
            </view>
            <view class="setting-right">
              <text class="setting-badge">{{ contentStats.favorites }}</text>
              <text class="setting-arrow">›</text>
            </view>
          </view>
          
          <view class="setting-item" @click="viewHistory">
            <view class="setting-left">
              <text class="setting-icon">📖</text>
              <text class="setting-name">浏览历史</text>
            </view>
            <view class="setting-right">
              <text class="setting-badge">{{ contentStats.history }}</text>
              <text class="setting-arrow">›</text>
            </view>
          </view>
          
          <view class="setting-item" @click="clearCache">
            <view class="setting-left">
              <text class="setting-icon">🧹</text>
              <text class="setting-name">清理缓存</text>
            </view>
            <view class="setting-right">
              <text class="setting-value">{{ contentStats.cacheSize }}</text>
              <text class="setting-arrow">›</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 学习与成就 -->
      <view class="settings-section">
        <text class="section-title">学习与成就</text>
        <view class="stats-grid">
          <view class="stat-item">
            <text class="stat-value">{{ achievements.studyDays }}</text>
            <text class="stat-label">学习天数</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ achievements.charactersCreated }}</text>
            <text class="stat-label">角色创作</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ achievements.storiesWritten }}</text>
            <text class="stat-label">故事创作</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ achievements.achievements }}</text>
            <text class="stat-label">成就徽章</text>
          </view>
        </view>
        
        <view class="achievement-progress">
          <text class="progress-label">创作等级进度</text>
          <view class="progress-bar">
            <view class="progress-fill" :style="{ width: achievements.levelProgress + '%' }"></view>
          </view>
          <text class="progress-text">{{ achievements.levelProgress }}%</text>
        </view>
      </view>

      <!-- 关于与支持 -->
      <view class="settings-section">
        <text class="section-title">关于与支持</text>
        <view class="settings-list">
          <view class="setting-item" @click="viewAbout">
            <view class="setting-left">
              <text class="setting-icon">ℹ️</text>
              <text class="setting-name">关于SakuraEcho</text>
            </view>
            <text class="setting-arrow">›</text>
          </view>
          
          <view class="setting-item" @click="viewHelp">
            <view class="setting-left">
              <text class="setting-icon">❓</text>
              <text class="setting-name">帮助中心</text>
            </view>
            <text class="setting-arrow">›</text>
          </view>
          
          <view class="setting-item" @click="contactSupport">
            <view class="setting-left">
              <text class="setting-icon">💌</text>
              <text class="setting-name">联系客服</text>
            </view>
            <text class="setting-arrow">›</text>
          </view>
          
          <view class="setting-item" @click="checkUpdate">
            <view class="setting-left">
              <text class="setting-icon">🔄</text>
              <text class="setting-name">检查更新</text>
            </view>
            <view class="setting-right">
              <text class="setting-value">v1.0.0</text>
              <text class="setting-arrow">›</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="logout-section">
        <button class="logout-btn" @click="logout">
          <text class="logout-text">退出登录</text>
        </button>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: '/static/avatar-default.png',
        name: '樱花动漫迷',
        level: 5
      },
      preferences: {
        darkMode: false,
        notifications: true,
        language: '简体中文',
        themeColor: '#FF69B4'
      },
      contentStats: {
        myIPs: 12,
        favorites: 45,
        history: 128,
        cacheSize: '256.3MB'
      },
      achievements: {
        studyDays: 45,
        charactersCreated: 23,
        storiesWritten: 15,
        achievements: 8,
        levelProgress: 75
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    saveSettings() {
      uni.showToast({
        title: '设置已保存',
        icon: 'success'
      })
    },
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.userInfo.avatar = res.tempFilePaths[0]
          uni.showToast({
            title: '头像更换成功',
            icon: 'success'
          })
        }
      })
    },
    editProfile() {
      uni.navigateTo({
        url: '/pages/profile-edit/profile-edit'
      })
    },
    changePassword() {
      uni.navigateTo({
        url: '/pages/change-password/change-password'
      })
    },
    manageDevices() {
      uni.navigateTo({
        url: '/pages/device-management/device-management'
      })
    },
    toggleDarkMode(e) {
      this.preferences.darkMode = e.detail.value
      
      if (this.preferences.darkMode) {
        uni.showToast({
          title: '已开启深色模式',
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: '已关闭深色模式',
          icon: 'success'
        })
      }
    },
    toggleNotifications(e) {
      this.preferences.notifications = e.detail.value
      
      if (this.preferences.notifications) {
        uni.showToast({
          title: '已开启消息通知',
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: '已关闭消息通知',
          icon: 'success'
        })
      }
    },
    changeLanguage() {
      const languages = ['简体中文', 'English', '日本語', '한국어']
      
      uni.showActionSheet({
        itemList: languages,
        success: (res) => {
          this.preferences.language = languages[res.tapIndex]
          uni.showToast({
            title: `语言已切换为${this.preferences.language}`,
            icon: 'success'
          })
        }
      })
    },
    changeTheme() {
      const themes = [
        { name: '樱花粉', color: '#FF69B4' },
        { name: '海洋蓝', color: '#4169E1' },
        { name: '森林绿', color: '#32CD32' },
        { name: '星空紫', color: '#9370DB' }
      ]
      
      uni.showActionSheet({
        itemList: themes.map(t => t.name),
        success: (res) => {
          this.preferences.themeColor = themes[res.tapIndex].color
          uni.showToast({
            title: `主题已切换为${themes[res.tapIndex].name}`,
            icon: 'success'
          })
        }
      })
    },
    viewMyIPs() {
      uni.navigateTo({
        url: '/pages/my-ips/my-ips'
      })
    },
    viewFavorites() {
      uni.navigateTo({
        url: '/pages/favorites/favorites'
      })
    },
    viewHistory() {
      uni.navigateTo({
        url: '/pages/browse-history/browse-history'
      })
    },
    clearCache() {
      uni.showModal({
        title: '清理缓存',
        content: '确定要清理所有缓存数据吗？此操作不可撤销。',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '清理中...'
            })
            
            setTimeout(() => {
              uni.hideLoading()
              this.contentStats.cacheSize = '0MB'
              uni.showToast({
                title: '缓存清理完成',
                icon: 'success'
              })
            }, 1500)
          }
        }
      })
    },
    viewAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      })
    },
    viewHelp() {
      uni.navigateTo({
        url: '/pages/help-center/help-center'
      })
    },
    contactSupport() {
      uni.navigateTo({
        url: '/pages/contact-support/contact-support'
      })
    },
    checkUpdate() {
      uni.showLoading({
        title: '检查更新中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '已是最新版本',
          icon: 'success'
        })
      }, 1000)
    },
    logout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '退出中...'
            })
            
            setTimeout(() => {
              uni.hideLoading()